import './index.scss'
import {InputComponent} from '../../../componet'
import  Select from '../select';
import { useState } from 'react'
import { Flex, Table } from 'antd';
import type { TableColumnsType} from 'antd';
import '../index.scss'
export default function Peopleliveserve() {
  //查询表单 
  let [formData,setformData]=useState({
    driction:'',
    type:'',
   status:0,
    speople:'',
    phone:'',
    address:'',
    inet:'',
    process:'',
 
    cpeople:''
  })
  //处理状态
  let clist=['已处理','未处理']
  //事件类型
 let typeList=['民生服务','矛盾劝解','社情民意','治安防控','突发事件','其他']
 //处理流程
 let processlist=['已经办结','上报处理'] 
 //网络
 let interlist=['网络A','网络B','网络C']
//定义表格列类型
  interface DataType {
    key: React.Key;

  }
  //定义表格列
  const columns: TableColumnsType<DataType> = [
    { title: '标题', dataIndex: 'title' , width: 100},
    { title: '分类', dataIndex: 'type' , width: 100},
    { title: '发布时间', dataIndex: 'time' , width: 100},
    { title: '发布人', dataIndex: 'people', width: 100 },
    { title: '阅读人数', dataIndex: 'phone' , width: 100},
    
    {'title':'操作',   fixed: 'right', width: 90,render: () => <a>详情</a>,}
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  //定义表格数据
  const dataSource = Array.from<DataType>({ length: 20 }).map<DataType>((_, i) => ({
    key: i,
    age: 32,
    title:'村规民约',
    type:'村规民约',
    time:'2024-05-12',
    people:'zz',
    phone:'122',
   
  }));

//修改事件描述
  const changeDriction = (e: string) => {
    let obj={...formData}
    obj.driction=e
    setformData(obj)
  }
  //修改上报人
  const changePeople = (e: string) => {
    let obj={...formData}
    obj.speople=e
    setformData(obj)
  }
  //修改事件类型
  const changeType = (e: string) => {
    let obj={...formData}
    obj.type=e
    setformData(obj)
  }
  //修改处理状态
  const changeStatus = (e: any) => {
    let obj={...formData}
    obj.status=e
    setformData(obj)
  }
  //修改处理流程
  const changeprocess = (e: string) => {
    let obj={...formData}
    obj.process=e
    setformData(obj)
  }
  const onSelectChange = (newSelectedRowKeys:any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changeableRowKeys:any) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_:any, index:number) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changeableRowKeys:any) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_:any, index:number) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className='pabpeo1'>
      <div className='header'>
<div className='pzbhbox'>
<span className='pableft'>标题</span> <InputComponent value={formData.driction} className='pzbright' onChange={changeDriction}></InputComponent>
</div>
  <button className='pzbbtn btn_red col_w'>查询</button>
  <button className='pzbbtn'>重置</button>
 
</div>

<Flex gap="middle" vertical>
      <Flex align="center" gap="middle">
      
        {hasSelected ? `Selected ${selectedRowKeys.length} items` : null}
      </Flex>
      <Table columns={columns} rowSelection={rowSelection}  dataSource={dataSource}></Table>
    </Flex>
    </div>
  )
}
